<template>
	<view class="page">
		<view class="tops">
			<u--input placeholder="请输入客户名称进行搜索" v-model="search" suffixIconStyle="color: #909399"></u--input>
			<view class="" style="position: absolute;right: 20rpx;top: 12rpx; z-index: 999;" @click="confirm">
				<u-icon name="search" color="#ccc" size="28"></u-icon>
			</view>
		</view>
		<mescroll-uni @init="mescrollInit" top="76" @down="downCallback" :up="upOption" @up="upCallback"
			@emptyclick="emptyClick">
			<view class="items" v-if="dataList.length > 0">
				<view class="items_left" :class="[changeBgc(0)]" style="margin-left: 16rpx;">
					1
				</view>
				<view class="items_right">
					<view class="items_right_t">
						<view class="s">
							<span>{{saleInfo.name || ''}}</span> <span
								style="color: #31AB3F;margin-left: 24rpx;font-size: 21rpx;">销售占比：{{saleInfo.share ? `${saleInfo.share }%` : ''}}</span>
						</view>
						<span style=" font-size: 36rpx;">{{saleInfo.count || '0'}}单</span>
					</view>
					<view class="items_right_b" v-if="saleInfo.minPrice === saleInfo.maxPrice">
						<span>官方指导价：￥{{saleInfo.minPrice ? `${saleInfo.minPrice}` : ''}}</span>
					</view>
					<view class="items_right_b" v-if="saleInfo.minPrice != saleInfo.maxPrice">
						<span>官方指导价：￥{{saleInfo.minPrice}} - {{saleInfo.maxPrice}}</span>
					</view>
					<view class="items_right_b">
						<span>放款金额：￥{{saleInfo.price || 0}}</span>
					</view>
				</view>
			</view>

			<view class="items tow" v-for="data in dataList">
				<view class="items_leftImg" style="margin-left: 22rpx;" @click="details(data.id)">
					<img src="@/static/ke_hu/shou.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="items_right" style="justify-content: flex-start;" @click="details(data.id)">
					<view class="items_right_t">
						<view class="s">
							<span>客户：{{data.name || ''}}</span>
						</view>
						<span style=" font-size: 20rpx;color: #9E9E9E;">{{data.createTime}}</span>
					</view>
					<view class="items_right_b">
						<span>订单状态：{{data.apply}}</span>
					</view>
					<view v-if="data.auditStatu!=null" class="items_right_b">
						<span>审核状态：{{data.auditStatu}}</span>
					</view>

					<view class="items_right_b" @click.stop="$PhoneCall(data.account)">
						<span class="line">电话：{{data.account || ''}}</span>
					</view>
					<view class="items_right_b">
						<span
							v-if="data.minPrice === data.maxPrice">官方指导价：{{data.minPrice ? `￥${data.minPrice}` : ''}}</span>
						<span v-if="data.minPrice != data.maxPrice">官方指导价：{{data.minPrice ? `￥${data.minPrice}` : ''}} -
							{{data.maxPrice ? `${data.maxPrice}` : ''}}</span>
						<span v-if="data.lendersAmount!=null"
							style="margin-left: 46rpx;">放款金额：{{data.lendersAmount}}</span>
					</view>
					<view class="items_right_b" v-if="data.cause">
						 <!-- v-if="data.applyStatus == 14 || data.applyStatus == 12" -->
						<span>原因：{{data.cause || ''}}
						</span>
					</view>
				</view>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				saleId: null,
				search: '', //搜索的关键字
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				dataList: [],
				saleInfo: {},
			}
		},
		onLoad(options) {
			console.log(options, 'optionsoptionsoptions');
			this.price = options.price
			this.saleId = options.saleId
			// this.getList(this.saleId)
		},
		methods: {

			async getList(saleId) {
				//获取练习列表数据
				const res = await this.$post(`/biz/distributorStatistics/kehuliebiao`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					saleId: saleId,
					sercherWord: this.search,
				})
				if (res.data.data.installments.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dataList = []
					}
					this.dataList = this.dataList.concat(res.data.data.installments.records)
					this.saleInfo = res.data.data
				}
				this.mescroll.endBySize(res.data.data.installments.records.length, res.data.data.installments
					.totalCount)
			},
			confirm() {
				this.pager.currentPage = 1
				this.getList(this.saleId)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList(this.saleId)
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},

			changeBgc(val) {
				let bgc = ''
				if (val == 1) {
					bgc = 'chengSe'
				} else if (val == 2) {
					bgc = 'lvSe'
				} else if (val == 3) {
					bgc = 'hongSe'
				} else if (val == 4) {
					bgc = 'heiSe'
				} else if (val == 5) {
					bgc = 'ziSe'
				} else {
					// 默认色
					bgc = 'chengSe'
				}
				return bgc
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/xiao_shou_duan/ding_dan_xiang_qing?id=' + id
				})
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 26rpx;
		box-sizing: border-box;
	}

	.tops {
		position: relative;
		width: 690rpx;
		height: 74rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		opacity: 1;
		border: 1rpx solid #ECECEF;
		margin: 0 auto 0;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		/* height: 159rpx; */
		padding: 20rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}

	.items_left {
		width: 99rpx;
		height: 99rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}

	.items_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}

	.items_right_b {
		margin-top: 11rpx;
		/* height: 29rpx; */
		font-size: 21rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #858585;
		line-height: 29rpx;
	}

	.items_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}

	.chengSe {
		background-color: #F89751;
	}

	.lvSe {
		background-color: #31AB3F;
	}

	.hongSe {
		background-color: #FB5951;
	}

	.heiSe {
		background-color: #361B32;
	}

	.ziSe {
		background-color: #6947DE;
	}

	.items_leftImg {
		width: 79rpx;
		height: 79rpx;
		margin: 0 26rpx 0 26rpx;
	}

	.tow {
		align-items: flex-start;
		padding-top: 16rpx;
		box-sizing: border-box;
		width: 690rpx;
		/* height: 240rpx; */
		padding: 20rpx 0;
	}
	.line {
		border-bottom:2rpx solid #5885F9;
		color: #5885F9;
	}
</style>